<template>
  <div class="table_box">
    <!--    table头-->
    <!--    table body-->
    <div class="table_body" v-for="(item,index) in device_data.device_list.slice(0,10)" :key="index" @click="set_device_code(item.uEquipmentCode)">
      <!--      <router-link -->
      <!--                   to="/index/cockpit/device_data_details" >-->
      <div class="item_header">
        {{ item.uEquipmentCode }}
      </div>
      <div class="item_header">
        {{ item.equipmentName }}
      </div>
      <div class="item_header">
        {{ item.userName }}
      </div>
      <div class="item_header" :style="{width:'55%'}">
        <!--设备状态-->
        <div class="device_box">
          <!--            <device :ref="'device0'+index" :canvas="'device0'+index"-->
          <!--                    :width="device_data.width"-->
          <!--                    :data_status_list="item.dictCode"/>-->
          <!--            <div class="device_box">-->
          <canvas :id="'canvas0'+index" :width="device_data.width" height="30"/>
          <!--            </div>-->
        </div>
      </div>
      <!--      </router-link>-->
    </div>
  </div>
</template>
<script>
import {defineComponent, reactive, getCurrentInstance} from "vue"
import {getStyleByEl} from "@/utils/dom/get_dom_style"
import {get_device_status_info} from "@/api/cockpit/data";
import {useRouter,useRoute} from "vue-router";
import {encryption} from "@/utils/base64";

function handle_data_list(data) {
  for (let i = 0; i < data.length; i++) {
    try {
      const dicCode = data[i].dictCode.split(',')
      data[i].dictCode = dicCode
    } catch (e) {
      // message.error("数据异常")
      data[i].dictCode = []
    }
  }
  return data;

}

export default defineComponent({
  name: "device_slicing",
  props: {
    width: {
      default: 280,
      type: Number
    }
  },
  setup() {
    // const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const {ctx} = getCurrentInstance()
    const device_data = reactive({
      device_list: [1],
      width: 280,
      data_list: [],
      re_flash: true
    });

    /**
     * 获取设备的数据
     * */
    const get_data_list = async () => {
      let params = {
        num: "0"
      }
      const res = await get_device_status_info(params)
      if (res.code === 1) {
        device_data.device_list = handle_data_list(res.data)
        // setTimeout(() => {
        for (let i = 0; i < device_data.device_list.length; i++) {
          // ctx.$refs['device0' + i].start()
          setTimeout(() => {
            ctx.init(device_data.device_list[i].dictCode, 'canvas0' + i)
          }, 0)
        }
        // }, 5000)
      }
    }

    /**
     * 写入 device_code
     * */
    const set_device_code = (code) => {

      if (route.query.name){
        router.push({
          path: "/index/cockpit/device_data_details", query: {
            uEquipmentCode: encryption(code),
            status:"江苏电力"
          }
        })
        return
      }
      router.push({
        path: "/index/cockpit/device_data_details", query: {
          uEquipmentCode: encryption(code)
        }
      })
      // store.commit("SET_DEVICE_CODE", device_data.device_list[key].uEquipmentCode)
    }


    return {
      device_data,
      get_data_list,
      set_device_code
    }
  },
  mounted() {
    const el = document.querySelector('.device_box');
    const style = getStyleByEl(el)
    this.device_data.width = Math.floor(Number(style.width.toString().replace('px', '')))

    setTimeout(() => {
      this.get_data_list()
    }, 500)

  },
  methods: {
    init(data_list, canvas) {
      // const data_list = data_status_list.value
      //绘制的宽度
      const width_item = this.device_data.width / data_list.length
      // debugger
      // function start_draw() {
      try {
        let canvas_dom = document.getElementById(canvas);
        let context = canvas_dom.getContext("2d");
        let colors = ["#FF0000", "#00FF00", "#ffff00", "#05274c"]; //"#ffff00"
        //--数据处理  DictCode 字段值  0 关机,1 待机， 2 工作，3 异常， 99 还未开始
        // let timer = setInterval(() => {
        let color = colors[Math.floor(Math.random() * colors.length)]

        for (let i = 0; i < data_list.length; i++) {
          const x = i * width_item;
          const val = Number(data_list[i]);
          context.fillRect(x, 0, width_item, 30);
          if (val === 0) {
            color = colors[0]
          } else if (val === 1 || val === 2) {
            color = colors[1]
          } else if (val === 3) {
            color = colors[2]
          } else {
            color = colors[3]
          }
          context.fillStyle = color;
        }
      } catch (e) {
        console.log("发生异常")
      }
      // }
    }
  },
  components: {
    // device
  }
})
</script>

<style scoped lang="scss">
.table_box {
  color: white;

  .table_header {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: 1.0rem;

    .item_header {
      border: 0.001rem #16d1ff dashed;
      width: 15%;
      height: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .table_body {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: 0.85rem;

    .item_header {
      border: 0.001rem #16d1ff dashed;
      width: 15%;
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;

      .device_box {
        height: 1.8rem;
        width: 100%;
      }
    }
  }


}

@-webkit-keyframes rowup {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -40rem, 0);
    transform: translate3d(0, -40rem, 0);
  }
}

@keyframes rowup {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -40rem, 0);
    transform: translate3d(0, -40rem, 0);
  }
}

.demo-list_device {
  width: 100%;
  position: relative;
  height: 29rem;
  overflow: hidden;

  .rowup {
    -webkit-animation: 30s rowup linear infinite normal;
    animation: 30s rowup linear infinite normal;
    position: relative;
  }
}

</style>
